---
id: app_check
title: App Check
---

You can integrate Firebase App Check with your app to protect your backend resources from abuse, such as billing fraud
or phishing. Firebase App Check works alongside other Firebase services, such as Firebase Authentication,
to help secure your backend resources.

FireCMS provides a simple way to integrate Firebase App Check with your app.

:::important
Remember to add the domain where you will be deploying your app to the list of allowed domains in AppCheck provider
configuration.
:::

For self-hosted versions, you can enable Firebase App Check in your app by providing the `options`
and `firebaseApp` props in the `useAppCheck` hook.

The `useAppCheck` hook is used to initialize Firebase App Check and monitor its status.
It handles the asynchronous initialization process, provides loading state, and captures any errors that
may occur during initialization.

### Parameters

- `firebaseApp` (optional): An instance of `FirebaseApp` to use for App Check initialization.
- `options` (optional): Configuration options for App Check.
    - `provider`: The provider you want to use.
    - `isTokenAutoRefreshEnabled`: Whether to automatically refresh the token.
    - `debugToken`: A debug token to use.
    - `forceRefresh`: Whether to force a token refresh.

### Return Value

Returns an object that includes:
- `loading`: A boolean indicating whether the initialization is in progress.
- `appCheckVerified` (optional): A boolean indicating whether the app has been verified by App Check.
- `error` (optional): Any error encountered during the initialization process.

### Example

```tsx
import {useAppCheck} from "@firecms/firebase";
import {ReCaptchaEnterpriseProvider} from "@firebase/app-check";

const {
    loading,
    error,
    appCheckVerified
} = useAppCheck({
    options: {
        provider: new ReCaptchaEnterpriseProvider(process.env.VITE_RECAPTCHA_SITE_KEY as string),
        isTokenAutoRefreshEnabled: true,
    }
});
```


## Providers

The `provider` property is required and should be an instance of a Firebase AppCheck provider.
You can use one of the following providers:

### ReCaptchaEnterpriseProvider

In order to set up the ReCaptchaEnterpriseProvider, you need to create a new reCAPTCHA Enterprise site key.
Follow the instructions in the [Firebase documentation](https://firebase.google.com/docs/app-check/web/recaptcha-enterprise-provider).

:::important
Make sure you have added the domain `app.firecms.co` to the list of allowed domains in the reCAPTCHA Enterprise console.
:::

```tsx
import {useAppCheck} from "@firecms/firebase";
import {ReCaptchaEnterpriseProvider} from "@firebase/app-check";

const {
    loading,
    error,
    appCheckVerified
} = useAppCheck({
    options: {
        provider: new ReCaptchaEnterpriseProvider("your-site-key"),
        isTokenAutoRefreshEnabled: true,
    }
});
```

### ReCaptchaV3Provider

In order to set up the ReCaptchaV3Provider, you need to create a new reCAPTCHA v3 site key.
Follow the instructions in the [Firebase documentation](https://firebase.google.com/docs/app-check/web/recaptcha-provider).

```tsx
import {useAppCheck} from "@firecms/firebase";
import {ReCaptchaV3Provider} from "@firebase/app-check";

const {
    loading,
    error,
    appCheckVerified
} = useAppCheck({
    options: {
        provider: new ReCaptchaV3Provider("your-site-key")
        isTokenAutoRefreshEnabled: true,
    }
});
```

### Custom provider

You can also create a custom provider by implementing the `AppCheckProvider` interface.
